import { ImportantEditModal, Empty } from '@/desktop/components'
import { type Focusing } from './logics'
import { RelatedRecords } from './related-records'
import { Search } from './search'
import './index.module.less'

export function HistorySearch(props: {
  visible: boolean
  initialKeyword: string
  onClose: (switchedId?: string) => void
}) {
  const { visible, initialKeyword, onClose } = props
  return <ImportantEditModal
    open={visible}
    onCancel={() => onClose()}
    title="搜索聊天记录"
    width="1000px"
  >
    {visible ? <Content initialKeyword={initialKeyword} onClose={onClose} /> : null}
  </ImportantEditModal>
}

function Content(props: { initialKeyword: string; onClose: (switchedId?: string) => void }) {
  const { initialKeyword, onClose } = props

  const [focusing, setFocusing] = useState<Focusing | null>(null)

  return <div styleName="history-search">
    <Search
      initialKeyword={initialKeyword}
      focusing={focusing}
      focus={setFocusing}
      goContact={onClose}
    />
    {focusing ? (
      <RelatedRecords
        key={`${focusing.match.conversationId}-${focusing.record.id}`}
        focusing={focusing}
      />
    ) : (
      <Empty styleName="empty-detail" description="点击左侧查看聊天详情" />
    )}
  </div>
}
